<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="format-detection" content="telephone=no" />
    <meta name="format-detection" content="email=no" />
    <title>圈子详情</title>
    <link rel="stylesheet" href="../../css/api.css">
    <link rel="stylesheet" href="../../css/vant.css">
    <link rel="stylesheet" href="../../css/main.css">
    <link rel="stylesheet" href="../../css/circle.css">


    <style scoped>
        .circle-wallet{
            position: fixed;
            top: 1rem;
            z-index: 1000;
            right: 0;
        }
    </style>
</head>

<body>
    <div id="wrap" class="app" v-cloak>
        <div id="main">
        </div>
        <div class="circle-wallet">
            <img src="https://zzzzkj.oss-cn-shanghai.aliyuncs.com/static/tiexie/app/image/image/circle/circle_detail_wallet.png" width="40" height="42" alt="">
        </div>
    </div>
    <script src="../../script/api.js"></script>
    <script src="../../script/flexible.js"></script>
    <script src="../../script/fastclick.js"></script>
    <script src="../../script/vue.min.js"></script>
    <script src="../../script/iconfont.js"></script>
    <script src="../../script/vant.min.js"></script>
    <script src="../../script/common.js"></script>
    <script src="../../script/businessCommon.js"></script>
    <script src="../../script/restful.js"></script>
    <script src="../../script/oxplayer.js"></script>
    <script>
        var ox = null;
        //styles data 数据 格式在 data.js里面
        apiready = function () {
            const h = api.frameHeight;
            const w = api.frameWidth;
            const styles = buiidStyles(w, h)
            const ox = api.require('oxPlayer');
            const vm = new Vue({
                el: '.app',
                data: {
                    timer: null,
                    currentPalyDuration: 0,//当前视频播放时长
                    topicId: api.pageParam.topicId,
                    screenType: api.pageParam.screenType,
                    module: 'TOPIC',
                    needOpenBtn: false, // 是否需要展开按钮
                    commentLists: [], // 评论列表
                    currentDetail: {}, // 当前动态
                    firstId: '', // 视频第一个id
                    lastId: '', // 视频最后id
                    currentActiveIndex: 0, // 
                    queryParams: { // 查询动态视频列表参数
                        channelId: api.pageParam.channelId, // 列表页-推荐-二级tab类型id
                        screenType: api.pageParam.screenType, // 0: 推荐 1: 关注 2: 点赞视频 3: 我的动态
                        pageNum: 1,
                        pageSize: 3,
                        topicId: api.pageParam.topicId, // 文章id
                        keyword: api.pageParam.keyword // 列表页搜索字段
                    },
                    scrollQueryParams: { // 滑动时请求参数
                        channelId: api.pageParam.channelId, // 列表页-推荐-二级tab类型id
                        screenType: api.pageParam.screenType, // 0: 推荐 1: 关注 2: 点在视频 3: 我的动态
                        pageNum: 1,
                        pageSize: 3,
                        gtTopicId: '', // 滑动到最上面时需传入的参数
                        ltTopicId: '', // 滑动到下面的时候需要传入的参数
                        keyword: api.pageParam.keyword // 列表页搜索字段  
                    },
                    // 配置文件
                    dbPlayOption: {
                        fixedOn: api.frameName,
                        rect: {
                            x: 0,
                            y: 0,
                            w: w,
                            h: h
                        },
                        fixed: true,
                        coreType: 0,//内核  0  exo  1 ijk api.systemType === "ios" ? 0 : 1
                        scrollType: 0, //滑动方向 0 上下滑动  1 左右滑动  默认 上下滑动 注意 开启左右滑动 前关闭左右滑动开关 ios 横滚未完成
                        // components:[hongbao],// 控件 包括 红包 自定义控件 可选 不随屏滚动控件
                        index: 0, //打开播放器播放第一个视频索引
                        openCache: true, //是否开启缓存
                        cacheItems: 3,//上下滑动时缓存条数 开启缓存有效  默认 2条
                        scaleMode: 0,//0 :自动调节 默认  1自适应 2 全屏
                        loadGif: 'widget://image/loading.gif',//启动动画 默认两个小球
                        showBack: true, //返回按钮是否显示事件返回code:0滑动返回code:1android有效
                        showShade: true,//头部 底部阴影 是否显示  默认显示
                        rightSlide: false, //右滑禁止开关  code 12 监听互动x坐标 为正 浮点型
                        leftSlide: false, //左滑禁止开关code 12 监听互动x坐标 为负 浮点型
                        freshUp: false, //上拉刷新开关  code 15
                        freshDown: true, //下拉拉刷新开关code 14
                        showDoubleClick: true, //双击红心点赞事件返回code:3
                        longClick: true, //11长按事件开关
                        heartImg: 'widget://image/icon_music_cover.png',//双击红心图片自定义
                        playBtn: '', //中间播放按钮图片(自定义) 可选 没有则用系统自带
                        backgroundColor: '', //视频背景颜色
                        backgroundHolder: '', //视频背景图片
                        avatarHolder: '', //头像背景图片
                        marginBottom: 55, //进度条距离底部距离
                        data: [] //视频数据
                    }
                },
                created() {
                    // 监听头部高度变化
                    api.addEventListener({
                        name: 'changeCircleHeadHeight'
                    }, (ret, err) => {
                        const winWidth = api.winWidth
                        api.setFrameAttr({
                            name: 'circle_video_detail_head_frame',
                            rect: {
                                h: ret.value.show ? 180 : 40
                            }
                        })
                    })
                    this.updateDataUserInfo()
                },
                mounted() {
                    this.initVideoArray()

                    // 进入后台
                    api.addEventListener({
                        name: 'pause'
                    }, function (ret, err) {
                        ox.pause();
                        vm.endCountTime()
                    });
                    // 进入前台
                    api.addEventListener({
                        name: 'resume'
                    }, function (ret, err) {
                        ox.replay();
                    });
                    //ios进入后台
                    api.addEventListener({
                        name: 'inactive'
                    }, function (ret, err) {
                        ox.pause();
                        vm.endCountTime()
                    });
                    //ios进入前台
                    api.addEventListener({
                        name: 'active'
                    }, function (ret, err) {
                        ox.replay();
                    });
                    // 监听关闭视频播放
                    api.addEventListener({
                        name: 'stopVideo'
                    }, function (ret, err) {
                        ox.pause();
                    });

                    // 监听ios左滑关闭
                    api.addEventListener({
                        name: 'viewdisappear'
                    }, function (ret, err) {
                        if (api.systemType === 'ios') {
                            ox.pause();
                            vm.endCountTime()
                        }
                    });
                    setBDPageStart("发现-视频详情")
                },

                methods: {
                    // 初始化插件
                    initOxPlayer() {
                        const vm = this
                        ox.addEventListener(function (ret) {
                            const code = ret.code;
                            if (code == 0) {
                                // 返回
                                //停止计时 并请求接口 上传播放数据
                                vm.endCountTime()
                                api.closeWin()
                            } else if (code == 2) {
                                // 单机
                                vm.closeHeadFrame()
                            } else if (code == 3) {
                                //双击
                                vm.handleThumpUp(ret, true)
                            } else if (code == 4) {
                                //播放到最后一个视频
                                vm.scrollAddVideo('down')
                            } else if (code == 5) {
                                console.log("滑动")
                                // 播放记录返回index滚动到播放记录索引           
                                vm.currentDetail = ret // 记录播放的当前数据信息
                                vm.recordCircleViewNum(ret)

                                //停止计时 并请求接口 上传播放数据
                                vm.endCountTime()

                                //开始计时
                                if (api.systemType === 'ios') {
                                    vm.startCountTime()
                                }

                            } else if (code == 6) {
                                console.log("播放")
                                //开始计时
                                vm.startCountTime()
                                // ox.replay();
                                // // 播放 
                            } else if (code == 7) {
                                // 暂停 
                                console.log("暂停")

                                //暂停计时
                                vm.pauseCountTime()
                                // ox.pause();
                            } else if (code == 8) {
                                // 播放返回 
                                console.log("准备播放")

                                vm.openTopBackFrame()

                            } else if (code == 10) {
                                console.log("播放完成")
                                //停止计时 并请求接口 上传播放数据
                                vm.endCountTime()
                            } else if (code == 14) {
                                // 下拉刷新
                                vm.scrollAddVideo('up')
                            } else if (code == 37) {
                                // 分享
                                vm.handleShare(ret)
                            } else if (code == 18) {
                                // 评论
                                vm.openCommentFrame(ret)
                            } else if (code == 19) {
                                // 点赞
                                vm.handleThumpUp(ret, false)
                            } else if (code == 25) {
                                // 关注
                                vm.handleFollow(ret)
                            } else if (code == 27) {
                                // 评论
                                vm.openCommentFrame(ret)
                            } else if (code == 20) {
                                // 取消关注
                                vm.handleFollow(ret)
                            }
                        });
                        this.dbPlayOption.index = this.currentActiveIndex
                        ox.dbPlay(this.dbPlayOption);
                    },

                    //上传播放数据
                    uploadPalyDuration() {
                        var token = $api.getStorage('accessToken')
                        if (token) {
                            //请求后台接口
                            var queryDurationData = {
                                duration: vm.currentPalyDuration,
                                topicId: vm.currentDetail.vid
                            }
                            circle("addVideoDuration")(queryDurationData, function (ret) {

                            })
                        }
                    },

                    //开始计时
                    startCountTime() {
                        let vm = this
                        console.log("开始计时" + this.timer)
                        this.timer = setInterval(() => {
                            vm.currentPalyDuration++
                        }, 1000);
                    },

                    //结束计时
                    endCountTime() {
                        let vm = this
                        if (this.timer) {
                            console.log("清除计时")
                            clearInterval(this.timer)
                        }

                        if (vm.currentPalyDuration != 0) {
                            //请求接口 
                            console.log("当前视频id>>" + vm.currentDetail.vid + "时长>>" + vm.currentPalyDuration)
                            vm.uploadPalyDuration()
                            vm.currentPalyDuration = 0
                        }
                    },

                    //暂停计时 
                    pauseCountTime() {
                        if (this.timer) {
                            clearInterval(this.timer)
                        }
                    },

                    // 初始化视频列表 
                    initVideoArray() {
                        const vm = this
                        fnGet(interfaces.CONTENT_MODULE.CIRCLE.GET_VIDEO_DETAIL, this.queryParams, false,
                            function (ret, err) {
                                if (ret && ret.code === RESPONSE_OK) {
                                    vm.dbPlayOption.data = vm.dataTranslate(ret.data)
                                    vm.firstId = ret.data[0].topicId
                                    vm.lastId = ret.data[ret.data.length - 1].topicId
                                    vm.$nextTick(() => {
                                        vm.initOxPlayer() // 初始化播放器
                                    })
                                } else {
                                    toastBottom(ret ? ret.msg : '');
                                }
                            }
                        );
                    },

                    // 添加一条浏览量
                    recordCircleViewNum(item) {
                        fnPut(interfaces.CONTENT_MODULE.CIRCLE.RECORD_VIEW_NUM + "/" + item.vid, {},
                            false,
                            function (ret, err) {
                                if (ret && ret.code === RESPONSE_OK) {
                                    // toastMiddle('添加浏览记录成功')
                                } else
                                    toastBottom(ret ? ret.msg : '');
                            }
                        )
                    },

                    // 更新评论条数
                    updateDataUserInfo() {
                        // 监听头部高度变化
                        api.addEventListener({
                            name: 'updateDataUserInfo'
                        }, (ret, err) => {
                            const vid = ret.value.vid;
                            const userInfo = ret.value.userInfo;
                            userInfo.commentNum += 1;
                            //更新当前用户信息(点赞状态 数字变化)
                            ox.updateUserInfo({
                                vid: vid,
                                userInfo: userInfo
                            });
                        })
                    },

                    // 数据转换 - 返回数据转换成组件接受的字段
                    dataTranslate(data) {
                        console.log(JSON.stringify(data))
                        const arr = []
                        if (data && data.length > 0) {
                            let option
                            data.forEach((item, index) => {
                                if (!item.headImg) {
                                    item.headImg = 'https://cdn.tiexiemall.com/static/user/default.png'
                                }
                                // console.log(item.commentNumber)

                                option = {
                                    vid: item.topicId,
                                    title: item.title,
                                    thumb: "http://cdn.quietblog.cn/video_1591001666192479287_img.jpg",
                                    url: item.medias[0].videoPath, // 视频路径
                                    styles: styles, // 样式
                                    userInfo: {
                                        uid: item.userId,
                                        userName: "@" + item.nickName, // 昵称
                                        avatar: item.headImg, // 头像
                                        isLive: false, // 是否是直播
                                        isFocus: item.attentionFlag == 1 || item.attentionFlag == -1 ? true : false, // 是否已关注 -1 本人 ， 0 未关注， 1 关注
                                        likeNum: item.likeNumber, // 点赞数量
                                        isLike: item.likeFlag ? true : false, // 是否点赞
                                        commentNum: item.commentNumber, // 评论数量
                                        shareNum: item.forwardNumber, // 分享次数
                                        title: item.title // 分享次数
                                    }
                                }
                                // console.log(JSON.stringify(item.commentNumber))

                                if (item.topicId === this.topicId) {
                                    this.currentActiveIndex = index
                                }
                                arr.push(option)
                            })
                        }

                        return arr
                    },

                    // 返回上一级
                    back() {
                        setBDPageEnd("发现-视频详情")
                        api.closeWin();

                    },

                    // 动态 点赞/取消点赞
                    handleThumpUp(item, isDoubleClick) {
                        var vm = this;
                        if (!checkToken()) return false;
                        if (!item.userInfo.isLike) {
                            fnPut(interfaces.CONTENT_MODULE.CIRCLE.LIKES_NEWS + "/" + item.vid, {},
                                false,
                                function (ret, err) {
                                    if (ret && ret.code === RESPONSE_OK) {
                                        // toastMiddle('点赞成功')
                                        const vid = item.vid;
                                        const userInfo = item.userInfo;
                                        userInfo.likeNum += 1;
                                        userInfo.isLike = true;
                                        //更新当前用户信息(点赞状态 数字变化)
                                        ox.updateUserInfo({
                                            vid: vid,
                                            userInfo: userInfo
                                        });

                                        api.sendEvent({
                                            name: 'refreshLike'
                                        })
                                    } else
                                        toastBottom(ret ? ret.msg : '');
                                }
                            )
                        } else {
                            if (!isDoubleClick) {
                                fnPut(interfaces.CONTENT_MODULE.CIRCLE.UNLIKES_NEWS + "/" + item.vid, {},
                                    false,
                                    function (ret, err) {
                                        if (ret && ret.code === RESPONSE_OK) {
                                            // toastMiddle('取消点赞')
                                            const vid = item.vid;
                                            const userInfo = item.userInfo;
                                            userInfo.likeNum -= 1;
                                            userInfo.isLike = false;
                                            //更新当前用户信息(点赞状态 数字变化)
                                            ox.updateUserInfo({
                                                vid: vid,
                                                userInfo: userInfo
                                            });
                                            api.sendEvent({
                                                name: 'refreshLike'
                                            })
                                        } else
                                            toastBottom(ret ? ret.msg : '');
                                    }
                                )
                            }
                        }
                    },

                    // 分享
                    handleShare(ret) {
                        if (!checkToken()) return false;
                        /*
                            * 参数 1: module: 分享所属模块, 主要用于在report_alert_frm.html中配置分享路径
                            * 参数 2: id: 分享是用id决定是哪个详情页
                            * 参数 3: type: 1是举报, 2是分享
                            * 参数 4: description:  分享标题/描述
                        */
                        toReportOrShareDialog(this.module, ret.vid, 2, ret.userInfo.title, 'CIRCLEVIDEO', ret.userInfo)
                    },

                    // 滑动获取更多数据
                    scrollAddVideo(dir) {
                        const vm = this
                        // 判断方向, 更改请求参数
                        if (dir === 'up') {
                            vm.$set(vm.scrollQueryParams, 'gtTopicId', vm.firstId)
                            vm.$set(vm.scrollQueryParams, 'ltTopicId', '')
                        } else {
                            // vm.dbPlayOption.data[vm.dbPlayOption.data.length - 1].vid
                            vm.$set(vm.scrollQueryParams, 'ltTopicId', vm.lastId)
                            vm.$set(vm.scrollQueryParams, 'gtTopicId', '')
                        }

                        // 请求加载更多数据
                        fnGet(interfaces.CONTENT_MODULE.CIRCLE.GET_MORE_NEWDETAIL, this.scrollQueryParams, false,
                            function (ret, err) {
                                if (ret && ret.code === RESPONSE_OK) {
                                    if (dir === 'up') {
                                        //播放到第一个视频
                                        if (ret.data.length === 0) {
                                            ox.stopFresh();
                                            toastMiddle('没有更多数据了')
                                        } else {
                                            ox.insertDataBefore({ data: vm.dataTranslate(ret.data), index: 0 }, function (ret1) {
                                                if (ret1.code == 0) {
                                                    ox.stopFresh();
                                                }
                                                ox.playIndex({ index: 2 });
                                                vm.firstId = ret.data[0].topicId
                                            });
                                        }
                                    } else {
                                        //播放到最后一个视频
                                        if (ret.data.length === 0) {
                                            toastMiddle('没有更多数据了')
                                        } else {
                                            ox.addDataAfter({ data: vm.dataTranslate(ret.data) }, function (ret1) {
                                                vm.lastId = ret.data[ret.data.length - 1].topicId
                                            });
                                        }
                                    }
                                } else {
                                    toastBottom(ret ? ret.msg : '');
                                }
                            }
                        );

                    },

                    // 创建头部frame
                    openTopBackFrame() {
                        const vm = this
                        const winWidth = api.winWidth
                        api.openFrame({
                            name: 'circle_video_detail_head_frame',
                            url: 'circle_video_detail_head_frame.html',
                            rect: {
                                x: winWidth - 140,
                                y: 50,
                                w: 140,
                                h: 40
                                //  x: 0,
                                // y: 0,
                                // w: 140,
                                // h: 40
                            },
                            // bgColor:'rgba(255, 255, 255, 0)',
                            pageParam: {
                                headerH: '123',
                                module: vm.module,
                                topicId: vm.currentDetail.vid,
                                screenType: vm.screenType,
                                title: vm.currentDetail.userInfo.title,
                            }
                        });
                        api.bringFrameToFront({
                            from: 'circle_video_detail_head_frame',
                            to: ''
                        });
                    },

                    // 展开更多详情
                    handleOpenMoreComment() {
                        this.needOpenBtn = false
                        this.$set(this.detailCurrent, 'videoShotDescription', this.detailCurrent.content)
                        this.$nextTick(() => {
                            this.handleChangeDetailHeight()
                        })
                    },

                    // 收起更多详情
                    handleCloseMoreComment() {
                        this.needOpenBtn = true
                        this.$set(this.detailCurrent, 'videoShotDescription', this.detailCurrent.content.slice(0, subStrLength))
                        this.$nextTick(() => {
                            this.handleChangeDetailHeight()
                        })
                    },

                    // 关注
                    handleFollow(item) {
                        const vm = this
                        /**
                         *
                         * @param {*} item 被关注的对象
                         * @param {*} callback 回调
                         */
                        console.log(JSON.stringify(item))

                        if (!checkToken()) return false;
                        console.log(item.userInfo.isFocus)
                        if (item.userInfo.isFocus) {// 是否已关注 -1 本人 ， 0 未关注， 1 关注
                            api.confirm({
                                title: '确定不再关注？',
                                buttons: ['确定', '取消']

                            }, function (ret, err) {
                                if (ret.buttonIndex == 1) {
                                    fnPut(interfaces.CONTENT_MODULE.CIRCLE.UNCONCERN_USER + "/" + item.userInfo.uid, {},
                                        false,
                                        function (ret, err) {
                                            if (ret && ret.code === RESPONSE_OK) {
                                                toastMiddle('取消关注')
                                                // 更新列表关注状态
                                                const userInfo = item.userInfo;
                                                const vid = item.vid;
                                                userInfo.isFocus = false;
                                                ox.updateUserInfo({
                                                    vid: vid,
                                                    userInfo: userInfo
                                                });

                                            } else
                                                toastBottom(ret ? ret.msg : '');
                                        }
                                    )
                                }
                            });
                        } else {
                            fnPut(interfaces.CONTENT_MODULE.CIRCLE.CONCERN_USER + "/" + item.userInfo.uid, {},
                                false,
                                function (ret, err) {
                                    if (ret && ret.code === RESPONSE_OK) {
                                        toastMiddle('关注成功，可在“我的关注中查看”')
                                        const userInfo = item.userInfo;
                                        const vid = item.vid;
                                        userInfo.isFocus = true;
                                        ox.updateUserInfo({
                                            vid: vid,
                                            userInfo: userInfo
                                        });
                                    } else
                                        toastBottom(ret ? ret.msg : '');
                                }
                            )
                        }
                    },

                    // 打开评论列表frame
                    openCommentFrame(ret) {
                        const winHeight = api.winHeight;
                        api.openFrame({
                            name: 'circle_video_detail_comment_frame',
                            url: 'circle_video_detail_comment_frame.html',
                            rect: {
                                y: winHeight - 460,
                            },
                            bgColor: 'rgba(255, 255, 255, 0)',
                            pageParam: {
                                headerH: '123',
                                topicId: ret.vid,
                                userInfo: ret.userInfo
                            }
                        });
                        api.bringFrameToFront({
                            from: 'circle_video_detail_frame',
                            to: 'circle_video_detail_frame'
                        });
                    },

                    // 关闭评论列表
                    closeCommentFrame() {
                        api.closeFrame({
                            name: 'circle_video_detail_comment_frame'
                        });
                    },

                    // 关闭头部弹框
                    closeHeadFrame() {
                        api.sendEvent({
                            name: 'closeHeadFram'
                        })
                    },

                    // 展开更多回复评论
                    showMoreComment(item, index) {
                        this.$set(this.commentLists[index], 'showMore', true)
                    },

                },
            })

            api.addEventListener({
                name: 'keyback'
            }, function (ret, err) {
                setBDPageEnd("发现-视频详情")
                vm.endCountTime()//返回时 结束计时
                api.closeWin();
            });

            api.addEventListener({
                name: 'addShareRecordSuccess'
            }, function (ret, err) {
                //添加分享记录成功后刷新数据
                const userInfo = ret.value.userInfo;
                const vid = ret.value.topicId;
                userInfo.shareNum += 1
                ox.updateUserInfo({
                    vid: vid,
                    userInfo: userInfo
                });
            });
        };
    </script>
</body>

</html>